function modernSelect(options){
    var style = {border:'1px solid #CCCCCC', 
          borderRadius: '5px 5px 5px 5px',
          cursor: 'pointer',
          width: '120px',
          backgroundColor: '#FFF',
          padding: '2px',
          paddingLeft: '4px'};
    
    this.id = options.name ? options.name : Math.floor(Math.random()*0x100000).toString(16);
    this.options = options.options ? options.options : [];
    this.selected = options.selected ? options.selected : '';
    this.itemClass = options.itemClass ? options.itemClass : '';
    this.style = options.style ? compareObjects(style, options.style) : style;
    this.element = null;
    this.itemStyle = {
        minHeight: '16px'
    }
    this.subStyle = {
        minWidth: this.style.width,
        backgroundColor: this.style.backgroundColor,
        position: 'absolute',
        display: 'none', 
        paddingTop: '4px',
        border: '1px solid rgb(204, 204, 204)',
        borderTop: '0',
        marginTop: '2px'
    }
    this.init();
    
}
modernSelect.prototype.init = function(){
    this.element = cE('div', {id: this.id}, this.style);
    this.input = cE('input', {name: this.id, type: 'hidden'});
    this.selectedItem = cE('div', {className:'selected_item'}, this.itemStyle);
    this.subMenu = cE('div', {className: 'sub'}, this.subStyle);
    this.element.appendChild(this.selectedItem);
    this.element.appendChild(this.subMenu);
    this.element.appendChild(this.input);
    $(this.element).click(function(){
        if ($("#" + this.id + " .sub").css("display") == "none"){
            $("#" + this.id + " .sub").slideDown("fast");
        }else{
            $("#" + this.id + " .sub").slideUp("fast");
        }
    });
    $(this.element).mouseleave(function(){
        $("#" + that.id + " .sub").slideUp("fast");
    });
    this.setElements(this.options);
//    this.setActions();
    
}
modernSelect.prototype.setActions = function(){
    var that = this; 
    $("#" + this.id + " .modern_select").click(function(){
        var val = $(this).attr("rel");
        var selected = $("#" + that.id + " .selected_item").attr("rel");
        if (selected != val){
            var html = this.innerHTML + "<span class='drop down'></span>";
            $("#" + that.id + " .selected_item").html(html);
            $("#" + that.id + " .selected_item").attr("rel", val);
            $("#" + that.id + " input").val(val);
        }
        $("#" + that.id + " .sub").slideUp("fast");
    });
}
modernSelect.prototype.addElements = function(object){
    if (typeof(object) == 'object'){
        this.options = extend(this.options, object);
        this.setElements();
    }else{
        return false;
    }
}
modernSelect.prototype.setElements = function(object, reset){
        this.options = object ? object : this.options;
        reset = reset || false;
        this.clear();
        var innerText;
        var selected;
        if (typeof(this.options[this.selected]) != 'undefined' && reset == false){
            innerText = this.options[this.selected];
            selected = this.selected;
        }else{
            for (var i in this.options){
                try{
                    innerText = this.options[i];
                    selected = i;
                }catch(e){
                    innerText = '';
                    selected = '';
                }
                break;
            }
        }
        this.selectedItem.setAttribute('rel',selected);
        this.selectedItem.innerHTML = "<span class='" + this.itemClass + "'></span>" 
                + innerText + 
                '<span class="drop down"></span>';
        for (var i in this.options){
            var option = cE('div', {className: "modern_select"}, this.itemStyle);
                option.setAttribute('rel',i);;
                option.innerHTML = "<span class='" + this.itemClass + ' ' + i +"'></span>" + this.options[i];
            this.subMenu.appendChild(option);
        }
        this.setActions();
        return true;
}
modernSelect.prototype.clear = function(){
    this.subMenu.innerHTML = '';
    this.selectedItem.innerHTML = "<span class='" + this.itemClass + "'></span>" + '<span class="drop down"></span>';
    this.selectedItem.setAttribute('rel', '');
    this.input.value = '';
}
modernSelect.prototype.setValue = function(value){
    var innerText, selected;
    if (typeof(this.options[value]) != 'undefined'){
            innerText = this.options[value];
            selected = value;
            this.selectedItem.setAttribute('rel',selected);
            this.selectedItem.innerHTML = "<span class='" + this.itemClass + "'></span>" 
                + innerText + 
                '<span class="drop down"></span>';
            this.input.value = value;
            return true;
    }
    return false;   
}
modernSelect.prototype.getValue = function(){
    return $(this.selectedItem).attr('rel');
}
modernSelect.prototype.css = function(object){
    if (typeof(object) == 'object'){
        
    }else{
        return false;
    }
}
function createModernSelect(){
    if (typeof arguments[0] == 'object'){
        return new modernSelect(arguments[0]);   
    }else if (typeof arguments[0] == 'string'){
        var opt = {name: arguments[0]};
        return new modernSelect(opt);  
    }else{
        throw "name or object of settingd are required!";
    }
    
}